<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="人人开源">
<meta name="keywords" content="人人开源">
<meta name="author" content="人人开源">
<title>人人开源</title>
<!-- Tell the browser to be responsive to screen width -->
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
<!-- Set render engine for 360 browser -->
<meta name="renderer" content="webkit">
<link rel="stylesheet" href="public/css/font-awesome.min.css">
<link rel="stylesheet" href="public/css/simple-line-icons.css">
<link rel="stylesheet" href="public/css/style.css">
<!--[if lt IE 9]>
  <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
  <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
  <![endif]-->
</head>
<body class="app flex-row align-items-center">
    <div class="container" id="rrapp" v-cloak>
        <div class="row justify-content-center">
            <div class="col-md-6">
                <div class="card-group mb-0">
                    <div class="card p-4">
                        <div class="card-block">
                            <h1>人人开源</h1>
                            <p class="text-muted">管理员登录</p>
                            <div v-show="error" class="alert alert-danger alert-dismissible">
						       <h4 style="margin-bottom: 0px;"><i class="fa fa-exclamation-triangle"></i> {{errorMsg}}</h4>
						    </div>
                            <div class="input-group mb-2">
                                <span class="input-group-addon"><i class="icon-user"></i>
                                </span>
                                <input type="text" class="form-control" placeholder="账号" v-model.trim="username" required="required" v-validate="'required'" name="账号">
                            </div>
                            <div class="input-group mb-2">
                                <span class="input-group-addon"><i class="icon-lock"></i>
                                </span>
                                <input type="password" class="form-control" placeholder="密码" v-model.trim="password" required="required" v-validate="'required'" name="密码">
                            </div>
                            <div class="input-group mb-2">
                                <span class="input-group-addon"><i class="icon-lock-open"></i>
                                </span>
                                <input type="text" class="form-control" v-model.trim="captcha" required="required" @keyup.enter="login" placeholder="验证码" v-validate="'required'" name="验证码">
                            </div>
                            <div class="input-group mb-3">
                                <span class="input-group-addon"><i class="icon-picture"></i>
                                </span>
                                <img alt="如果看不清楚，请单击图片刷新！" class="pointer" :src="src" @click="refreshCode">
        						<span class="input-group-btn">
                                      <button type="button" class="btn btn-primary" @click="refreshCode">点击刷新</button>
                                 </span>
                            </div>
                            <div class="row">
                                <div class="col-6">
                                    <button type="button" class="btn btn-success px-4" @click="login">登录</button>
                                </div>
                                <div class="col-6 text-right">
                                    <button type="button" class="btn btn-link px-0" @click="doForget">忘记密码?</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
	<!-- /.login-box -->
	<!-- Bootstrap and necessary plugins -->
    <script src="public/plugins/jquery.min.js"></script>
    <script src="public/plugins/tether/js/tether.min.js"></script>
    <script src="public/plugins/bootstrap/js/bootstrap.min.js"></script>
	<script src="public/plugins/vue.min.js"></script>
	<script src="public/plugins/vee-validate.min.js"></script>
	<script src="public/plugins/layer/layer.js"></script>
	<script type="text/javascript">
		Vue.use(VeeValidate);
		var vm = new Vue({
			el : '#rrapp',
			data : {
				username : '',
				password : '',
				captcha : '',
				error : false,
				errorMsg : '',
				src : 'captcha.jpg'
			},
			beforeCreate : function() {
				if (self != top) {
					top.location.href = self.location.href;
				}
			},
			methods : {
				refreshCode : function() {
					this.src = "captcha.jpg?t=" + $.now();
				},
				login : function(event) {
					vm.$validator.validateAll().then(() => {
						var index = layer.load(0, {shade: false}); //0代表加载的风格，支持0-2
						var data = "username=" + vm.username + "&password="
						+ vm.password + "&captcha=" + vm.captcha;
						$.ajax({
							type : "POST",
							url : "sys/login",
							data : data,
							dataType : "json",
							success : function(result) {
								if (result.code == 0) {//登录成功
									parent.location.href = 'index.html';
								} else {
									vm.error = true;
									vm.errorMsg = result.msg;
									vm.refreshCode();
									layer.close(index);
								}
							}
						});
		            }).catch(() => {
		            	layer.alert(vm.errors.all()[0], {
		            		  icon: 2,
		            		  skin: 'layer-ext-moon'
		            		});
		            });
				},
				doForget : function(){
					layer.msg('有空再写了');
				}
			}
		});
	</script>
</body>
</html>
